<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/global.css">
    <style>
        #drawPolygon {
            width: 100vmin;
            height: 100vmin;
            background-color: #000;
            display: flex;
        }
        .tooltip{
            position: absolute;
            color: #fff;
            top: 20px;
            left: 20px;
        }
    </style>
</head>

<body>
    <canvas id="drawPolygon"></canvas>
    <div class="tooltip">通过鼠标左键在黑色区域绘制</div>
    <script type="module">
        import { aspectFill, aspectFit, scaleToFill } from "https://gcore.jsdelivr.net/npm/@3r/tool/lib/picture.js";
        import { Vector2, v2 } from "https://gcore.jsdelivr.net/npm/@3r/tool/lib/vertor2.js";



        /** @type {HTMLCanvasElement} */
        let canvas = document.querySelector("#drawPolygon")
        let ctx = canvas.getContext('2d')
        let width = canvas.clientWidth;
        let height = canvas.clientHeight;
        canvas.width = width;
        canvas.height = height;

        let points = []
        let currIndex = -1;
        let allowDraw = true;
        let allowClosePath = false

        canvas.addEventListener("mousedown", mouseDownFunc)
        canvas.addEventListener("mousemove", mouseMoveFunc)

        function mouseDownFunc(ev) {
            console.log(ev);
            // 左键
            if (ev.button == 0) {
                if (points.length < 2) {
                    points.push(v2(ev.offsetX, ev.offsetY))
                    currIndex++;
                }
                else if (allowDraw && allowClosePath) {
                    points[currIndex + 1] = v2(points[0].x, points[0].y)
                    canvas.removeEventListener("mousedown", mouseDownFunc)
                    canvas.removeEventListener("mousemove", mouseMoveFunc)
                    allowClosePath = false;
                    render();
                }
                else if (allowDraw) {
                    points.push(v2(ev.offsetX, ev.offsetY))
                    currIndex++;
                }
            }

            console.log(points);
            render();
        }
        function mouseMoveFunc(ev) {
            if (currIndex > -1) {
                points[currIndex + 1] = v2(ev.offsetX, ev.offsetY)
                render();
            }
            checkAllowDraw();
            checkClosePath();
        }



        /**
         * 检查是否允许
         */
        function checkAllowDraw() {
            let _allowDraw = true;
            if (points.length > 3) {
                for (let i = 0; i < points.length - 3; i++) {
                    if (Vector2.checkCross(points[i], points[i + 1], points[points.length - 2], points[points.length - 1])) {
                        _allowDraw = false;
                        break;
                    }
                }
            }
            allowDraw = _allowDraw;
        }
        /**
         * 检测是否闭口
         */
        function checkClosePath() {
            if (points.length > 2) {
                allowClosePath = Vector2.distance(points[0], points[points.length - 1]) < 5;
            }
        }
        /**
         * 渲染
         */
        function render() {
            ctx.clearRect(0, 0, width, height)
            ctx.strokeStyle = allowDraw ? '#0f0' : '#f00'
            ctx.beginPath();
            ctx.moveTo(points[0].x, points[0].y)
            for (let i = 1; i < points.length; i++) {
                const point = points[i];
                ctx.lineTo(point.x, point.y)
            }
            ctx.stroke();

            if (allowClosePath) {
                ctx.beginPath();
                ctx.arc(points[0].x, points[0].y, 5, 0, Math.PI * 2)
                ctx.stroke();
            }
        }


    </script>
</body>

</html>